<template>
    <div class="app-film-item-h">
        <div class="content-box" v-for="filmitem in filmitems" :key="filmitem.id">
            <p class="datetime" v-if="pshow[urltype.type]">{{ filmitem.comingTitle }}</p>
            <router-link tag="div" 
                :to="{ name: 'movieitem', params: { detail: filmitem.id } }" 
                class="item" @click.native="changename(filmitem.nm)"
            >
                <div class="img-box">
                    <img :src="filmitem.img" :alt="filmitem.nm">
                </div>
                <div class="film-info">
                    <div class="left">
                        <div class="title">{{ filmitem.nm }}</div>
                        <div class="ellipsis" v-if=" filmitem.sc != 0 ">
                            <span class="suffix">观众评</span>
                            <span class="grade">{{ filmitem.sc | grade }}</span>
                        </div>
                        <div class="ellipsis" v-else>
                            <span class="grade">{{ filmitem.wish }}</span>
                            <span class="suffix">人想看</span>
                        </div>
                        <div class="protagonist">主演: {{ filmitem.star }}</div>
                        <div class="count" v-if="urltype.type === 'movieList'">{{ filmitem.showInfo }}</div>
                        <div class="count" v-else>{{ filmitem.rt }}上映</div>
                    </div>
                    <div class="right">
                        <span class="fix red"  v-if=" filmitem.showst === 3">购票</span>
                        <span class="fix blue" v-else-if=" filmitem.showst === 4 ">预售</span>
                        <span class="fix yellow" v-else>想看</span>
                    </div>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
import Bus from "@util/bus"
export default {
    data () {
        return {
            filmitems: [],
            newDate: '',
            pshow: {
                movieList: false,
                coming: true
            }
        }
    },
    props: ['urltype'],
    created () {
        this.$ajax.get(this.urltype.url)
            .then(results => {
                if (results.status === 200) {
                    console.log('获取数据成功...');
                    this.filmitems = results.data[this.urltype.type];
                    this.filmitems.forEach(element => {
                        element.img = element.img.replace(/w.h/,'128.180');
                    });
                    // console.log(this.filmitems.img);
                    // this.filmitems.img.replace(/w.h/,'128.180');
                    // console.log(this.filmitems);
                } else {
                    console.log('发生未知错误，获取数据失败...');
                }
            })
            .catch(err => {
                console.log(err);
            });
    },
    methods: {
        changename (value) {
            Bus.$emit('changename', value);
        }
    }
}
</script>

<style lang="scss">
.app-film-item-h {
    padding-left: .4rem;
    background-color: #fff;
    // height: 3.04rem;
    // border-bottom: 1px solid #999999;
    
    .content-box {
        height: auto;

        p {
            padding-top: .32rem;
            margin: 0;
            font-size: .373333rem;
            color: #333;
            height: auto;
        }

        .item {
            display: flex;
            justify-content: space-between;

            .img-box {
                margin-top: .32rem;
                width: 1.706667rem;
                height: 2.4rem;
            }

            .film-info {
                display: flex;
                justify-content: space-between;
                padding: .32rem .373333rem .32rem .266667rem;

                .left {
                    padding-right: .133333rem;
                    margin-top: .133333rem;

                    .title {
                        height: .466667rem;
                        margin-bottom: .2rem;
                        line-height: .32rem;
                        font-size: .45rem;
                        font-weight: bold;
                    }

                    .ellipsis {
                        height: .6rem;

                        .grade {
                            margin: 0 .133333rem;
                            font-weight: 700;
                            color: #faaf00;
                            font-size: .4rem;
                        }
                    }

                    .protagonist {
                        height: .5rem;
                        font-size: .333333rem;
                        color: #666;
                        overflow: hidden;
                    }

                    .count {
                        height: .5rem;
                    }
                }
                
                .right {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 1.333333rem;
                    height: 2.4rem;

                    .fix {
                        width: 1.066667rem;
                        height: .8rem;
                        background-color: #f03d37;
                        border-radius: 4px;
                        color: #fff;
                        line-height: .8rem;
                        text-align: center;
                    }

                    .fix.blue {
                        background-color: #3c9fe6;
                    }

                    .fix.yellow {
                        background-color: #faaf00;
                    }
                }
            }
        }
        
    }
}
</style>
